<template>
	<view class="column-div flowChart-view" style="width: 100%; height: 100vh;" catchtouchmove="return">
		<view class="flowChart-card" style="width: 600upx; height: 1050upx;">
			<view class="row-end" style="width: 100%;padding: 15px;">
				<uni-icons type="closeempty" size="25upx" color="#EEEEEE" @click="cancel"></uni-icons>
			</view>
			<canvas id="flowChart" canvas-id="flowChart" class="flowChart" style="width: 600upx; height: 900upx;"></canvas>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				width: 300,
				height: 450,
				ctx: null,
				canvasView: null,
				entity: [{
						name: '原料供应',
						arr: [],
						value: [
							'五常大米',
							'食用盐',
							'凝固剂',
							'微量元素',
						]
					},
					{
						name: '生产产品',
						arr: [],
						value: [
							'播种',
							'收割',
							'新米'
						]
					},
					{
						name: '销售商',
						arr: [],
						value: [
							'京东旗舰店',
							'构购商城'
						]
					}
				]
			}
		},
		mounted() {
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		this.width = res.windowWidth
			// 		this.height = res.windowHeight

			// 	}
			// })
			this.info(this.width, this.height)
		},
		methods: {
			cancel() {
				this.$emit('cancel')
			},
			info(twidth, theight) {
				this.ctx = uni.createCanvasContext('flowChart', this);
				// #ifdef H5  
				this.canvasView = document.querySelector('.flowChart > canvas')
				this.canvasView.width = 600
				this.canvasView.height = 900
				// #endif
				let list = []
				let tList = []
				console.log(this.dataList)
				this.dataList.forEach((entity, i) => {
					let arr = []
					entity.value.forEach((item, index) => {
						arr.push(this.createRect(i ? index + 1 : index, `${item}`, i != 0 ? list[list.length - 1].line.x : 0))
					});
					tList.push(this.verticalLine(arr, entity.name))
					list = arr;
				})
				// Object.keys(this.entity).forEach((key, i) => {
				// 	let entity = this.entity[key];
				// 	let arr = []
				// 	entity.element.forEach((item, index) => {
				// 		arr.push(this.createRect(i ? index + 1 : index, item, i != 0 ? list[list.length - 1].line.x : 0))
				// 	});
				// 	tList.push(this.verticalLine(arr, entity.name))
				// 	list = arr;
				// })
				tList.forEach((item, index) => {
					if (index == tList.length - 1) return;
					this.ctx.beginPath();
					this.ctx.setLineWidth(0.2)
					this.ctx.setLineDash([10, 10]);
					this.ctx.moveTo(item.x - 20, item.y + 20);
					this.ctx.lineTo(tList[index + 1].x - 20, tList[index + 1].y - 20);
					this.ctx.stroke();
					this.ctx.save();
					this.createArrows(tList[index + 1].x - 20, tList[index + 1].y - 20)
				})
				this.ctx.draw()
			},
			createArrows(x, y) {
				let ctx = this.ctx
				ctx.beginPath();
				ctx.setLineDash([0, 0]);
				ctx.moveTo(x + 5, y);
				ctx.lineTo(x - 5, y);
				ctx.lineTo(x, y + 5);
				ctx.closePath();
				ctx.stroke();
				ctx.fillStyle = '#EEEEEE'
				ctx.fill();
				ctx.save();
			},
			verticalLine(arr, text) {
				if (!arr && !arr.length) return
				let y = arr[0].line.y
				let start = arr[0].line.x;
				let end = arr[arr.length - 1].line.x;
				let fontSize = 13
				let ctx = this.ctx
				ctx.beginPath();
				ctx.setLineWidth(0.2)
				ctx.moveTo(y, start);
				ctx.lineTo(y, end);
				ctx.stroke();
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(0.2)
				ctx.moveTo(y, (start + end) / 2);
				ctx.lineTo(y - 20, (start + end) / 2);
				ctx.stroke();
				ctx.save();
				ctx.setFontSize(fontSize)
				ctx.setFillStyle("#333333")
				let tx = (start + end) / 2 + 3
				let ty = y - 25 - text.length * fontSize
				ctx.fillText(text, ty, tx)
				return {
					x: y - 20,
					y: (start + end) / 2
				}
			},
			createRect(index, text, height) {
				let strArr = this.textSubString(text, 12)
				let ctx = this.ctx
				let rWidth = strArr[0].length * 12 > 80 ? 150 : 80 + 15;
				let rHeight = strArr.length * 25;
				let rleft = this.width - 170
				let rtop = (40 * index) + (height || 0)
				let fontSize = 12
				let textheight = 16 + rtop
				let lineArr = []
				ctx.save();
				ctx.setFillStyle("#EEEEEE")
				ctx.fillRect(rleft, rtop, rWidth, rHeight)
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(0.2)
				ctx.moveTo(rleft, rHeight / 2 + rtop);
				ctx.lineTo(rleft - 20, rHeight / 2 + rtop);
				ctx.stroke();
				ctx.save();
				ctx.setFontSize(fontSize)
				ctx.setFillStyle("#666666")
				strArr.forEach((item, index) => {
					let textLeft = (rWidth - item.length * fontSize) / 2
					if (item.length < 12 && strArr.length > 1) {
						textLeft = 3
					}
					ctx.fillText(item, textLeft + rleft, textheight + (index * 25))
				})
				return {
					line: {
						y: rleft - 20,
						x: rHeight / 2 + rtop
					}
				}
			},
			textSubString(str, number) {
				let arr = [],
					index = 0;
				while (index < str.length) arr.push(str.slice(index, index += number));
				return arr;
			}
		}
	}
</script>

<style scoped lang="scss">
	.flowChart-view {
		position: fixed;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;

		.flowChart-card {
			background: #FFFFFF;
			border-radius: 16upx;
		}
	}
</style>
